<template>
  <!-- 11月 活动入口-->
  <div class="acti_entry pointer" v-if="showActivity && activityId > 0">
    <div class="activity-timer-box">
      <span class="timer-word">爆品折扣</span>
      <span v-show="fielsStatus !== 2" class="text-time">{{timerText}}</span>
      <div class="acti_entry_timer" v-if="timerresult">
        <template v-if="dayNum > 0">
          <span class="week-time">{{timerresult.substr(0,1)}}</span>
          <span class="timer-text">天</span>
        </template>
        <template v-else>
        <span class="week-time">{{timerresult.substr(2,2)}}</span>
        <span class="week-colon">:</span>
        <span class="week-time">{{timerresult.substr(5,2)}}</span>
        <span class="week-colon">:</span>
        <span class="week-time">{{timerresult.substr(8,2)}}</span>
        </template>
      </div>
      <router-link :to="{name: 'ActivityGoods'}" class="right more" @click.native="setLog">更多爆品></router-link>
    </div>
    <div class="week_activity_products week_activity_box" @mouseenter.stop="hover = true" @mouseleave.stop="hover = false">
      <span class="roll roll-left" @click="sliderProduct(0)" v-show="hover && curIndex !== 0">
        <i class="el-icon-arrow-left"></i>
      </span>
      <div class="slider" v-bind:style="sliderWidth" >
        <StepProduct class="octo_product" v-if="activityLen" proType="index" :productList="actproductList" :fielsStatus="fielsStatus" :actDate="actDate" @refresh="activityTime"></StepProduct>
      </div>
      <span class="roll roll-right" @click="sliderProduct(1)" v-show="hover && curIndex !== negativeLen">
        <i class="el-icon-arrow-right"></i>
      </span>
    </div>
  </div>
</template>

<script>
import { activityJoinLog } from '@/service/get-data'
import StepProduct from '@/components/bargainProduct/index.vue'
import { countDown } from '@/tool/tool'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'HotProduct',
  components: {StepProduct},
  data () {
    return {
      actDate: '',
      timerText: '', // 活动是开始还是结束的文字
      globalTimer: null,
      timerresult: '',
      septActivityShow: false, // 九月全场活动弹窗
      openedActList: {},
      showActivity: true, // 周周活动是否继续中
      // dayNum: 0,
      fielsStatus: 0, // 活动状态  0：未开启， 1： 进行中 2 ：活动结束
      curIndex: 0,
      sliderWidth: {width: 0, transform: 'translateX(0)'},
      sliderTransform: {transform: 'translateX(0)'},
      hover: false
    }
  },
  computed: {
    ...mapState({
      activityId: state => state.activityId - 0
    }),
    dayNum () {
      return (this.timerresult && this.timerresult.substr(0, 1) - 0) || 0
    },
    actproductList () {
      let arr = []
      if (!('id' in this.openedActList)) { return [] }
      let startTimeParm = this.openedActList.startTime
      let endTimeParm = this.openedActList.endTime
      this.openedActList.activityProductVOS.forEach((item, index) => {
        item.number = 0
        item.startTime = startTimeParm
        item.endTime = endTimeParm
        arr.push(item)
      })
      var sortArr = arr.sort(function (obj1, obj2) {
        let val1 = obj1.stock
        let val2 = obj2.stock
        if (val1 < val2) {
          return 1
        } else if (val1 > val2) {
          return -1
        } else {
          return 0
        }
      })
      return sortArr
    },
    activityLen () {
      return (this.openedActList && this.openedActList.activityProductVOS && this.openedActList.activityProductVOS.length) || 0
    },
    negativeLen () {
      let len
      if (this.activityLen === 0) return 0
      len = this.activityLen > 9 ? 9 : this.activityLen
      return -(Math.ceil(len / 3) - 1) - 0
    }
  },
  methods: {
    ...mapActions(['fetchActivityId', 'fetchOpenActivity']),
    // 活动日志
    async setLog () {
      let text
      let fromRoute = this.$route.name
      fromRoute === 'Index' ? text = '主页进爆款专区' : text = '品牌进爆款专区'
      let res = await activityJoinLog(this.username, this.activityId, text)
      if (res.data.resultCode && res.data.resultCode === 2000) {
      } else {
        this.$message(res.data.resultMsg || '网络出错')
      }
    },
    sliderProduct (type) {
      // type 0: 左边 1:右边
      if (this.curIndex === 0 && !type) return // 不能再往左边
      if (this.curIndex === this.negativeLen && type) return // 不能再往右边
      type ? this.curIndex-- : this.curIndex++
      this.sliderWidth.transform = `translateX(${this.curIndex * 1200}px)`
    },
    activityTime () {
      this.fetchOpenActivity().then(res => {
        this.openedActList = {}
        this.openedActList = (res && res.voList[0]) || {}
        // 周周活动结束
        if (!('id' in this.openedActList)) {
          this.showActivity = false
          return
        }
        this.showActivity = true
        // 样式
        let X = this.openedActList.activityProductVOS.length
        this.sliderWidth['width'] = `${12 * (X % 3 + Math.floor(X / 3) * 2) + X * 392}px`
        let _str = this.openedActList.startTime.split(' ')[0].split('-')
        this.actDate = `${_str[1]}月${_str[2]}日开启 敬请期待`
        let startTimeParm = this.openedActList.startTime
        let endTimeParm = this.openedActList.endTime
        const starTimeStamp = (new Date(startTimeParm.replace(/-/g, '/'))).getTime()
        const endTimeStamp = (new Date(endTimeParm.replace(/-/g, '/'))).getTime()
        let nowTime = (new Date()).getTime()
        // 周周活动开始
        if (nowTime > starTimeStamp && nowTime <= endTimeStamp) {
          this.timerText = '距结束'
          this.fielsStatus = 1
          this.startCountFn(endTimeParm)
          return
        }
        // 周周活动还未开始
        if (nowTime < starTimeStamp) {
          this.timerText = '距开始'
          this.fielsStatus = 0
          this.startCountFn(startTimeParm)
        }
        // 周周活动结束
        if (nowTime > endTimeStamp) {
          this.timerText = '本场活动结束'
          this.fielsStatus = 2
        }
      // }
      })
    },
    // 倒计时 2018-09-10 2018-09-30
    startCountFn (timeParm) {
      let vm = this
      clearInterval(vm.globalTimer)
      vm.globalTimer = null
      vm.globalTimer = setInterval(function () {
        vm.timerresult = countDown(timeParm)
        // 剩余时间<=0
        if (vm.timerresult + '' === 'false') {
          clearInterval(vm.globalTimer)
          vm.globalTimer = null
          setTimeout(() => {
            vm.activityTime()
          }, 800)
        }
      }, 1000)
    }
  },
  mounted () {
    this.activityTime()
  },
  // activated () {
  //   console.log('爆款组件')
  //   this.activityTime()
  // },
  beforeRouteLeave () {
    clearInterval(this.globalTimer)
    this.globalTimer = null
  }

}
</script>

<style lang="scss" scoped>
.acti_entry {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;

  .week_activity{
    position: relative;
    height: 188px;
    width: 290px;
    float: left;
    text-align: center;
    background: #9f2594;
    color: #ffffff;
    padding: 28px 0 24px;
    box-sizing: border-box;
    h1{
      line-height: 25px;
      font-size: 18px;
      margin-bottom: 6px;
    }
    h2{
      line-height: 44px;
      font-size: 31px;
      margin-bottom: 2px;
    }
    h3{
      font-size: 12px;
      line-height: 17px;
    }
  }
  .week_activity_box{
    width: 1200px;
    height: 200px;
    // margin-bottom: 30px;
    overflow: hidden;
  }
  .roll {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    color: #fff;
    position: absolute;
    top: 48%;
    z-index: 555;
    cursor: pointer;
    opacity: 0.6;
    &:hover{
      opacity: 0.8;
    }
  }
  .roll-left{
    left: 0;
  }
  .roll-right{
    right: 0;
  }
  .roll_disabled{
    opacity: 0.5;
  }
  .slider{
    transition: ease 0.3s;
  }
  .overtime_activity{
    background: #A8A8A8;
    .overtime_text {
      border: 1px solid #fff;
      display: inline-block;
      width: 178px;
      height: 40px;
      line-height: 40px;
      border-radius: 4px;
      margin-top: 12px;
    }
  }
  .acti_entry_img{
    z-index: 0;
    position: relative;
    text-align: center;
  }
  .acti_entry_info {
    position: relative;
    z-index: 5;
    font-size: 30px;
    // line-height: 5;
  }
}
.activity-timer-box{
  // margin-top:30px;
  height:50px;
  line-height: 50px;
  color:#ffffff;
  padding: 0 10px 0 20px;
  box-sizing: border-box;
  background:#B53232;
  .timer-word{
    font-size: 20px;
    margin-right: 20px;
  }
  .text-time{
    font-size: 16px;
    margin-right: 10px;
  }
  .more{
    font-family: PingFangSC-Regular, Microsoft YaHei;
    color: #333333;
    font-size: 16px;
    background: #fff;
    border-radius: 4px;
    // width: 114px;
    height: 35px;
    line-height: 35px;
    padding: 0 11px;
    text-align: center;
    margin-top: 7.5px;
  }
  .more-tag{
    display: inline-block;
    width:17px;
    height:17px;
    line-height: 17px;
    color: #fff;
    border-radius: 50%;
    background:linear-gradient(234deg,rgba(255,121,121,1) 0%,rgba(252,137,15,1) 100%);
  }
}
.timer{
  color: #F5360E;
  font-size:53px;
  font-family: HeiTi;
}
// 倒计时
.acti_entry_timer{
  display:inline-block;
  position: absolute;
  margin-top: 7px;
  line-height: 30px;
  .timer-text{
    color:#fff;
    line-height:38px;
    font-size:16px;
    vertical-align: top;
  }
  .week-time{
    font-family: PingFangSC-Semibold, Microsoft YaHei;
    font-weight: 600;
    background: #ffffff;
    border-radius: 4px;
    width: 42px;
    height: 35px;
    display: inline-block;
    vertical-align: top;
    color: #ff0000;
    font-size: 20px;
    line-height: 35px;
    text-align: center;
    letter-spacing: 2px;
  }
  .week-colon {
    font-size: 20px;
    line-height: 40px;
    vertical-align: top;
    display: inline-block;
  }
}
</style>
